<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="__PUBLIC__/css/font.css">
    <link rel="stylesheet" href="__PUBLIC__/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__PUBLIC__/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .table-left {
            width: 200px;
            float: left;
        }
        .table-left ul li {
            font-size: 18px;
            color: #000;
            border-bottom: 1px solid #ccc;
            background: #EFEFEF;
            line-height: 40px;
            padding: 10px;
            text-align: center;
            margin-bottom: 10px;
            border-radius:25px;
        }
        .table-left ul li a {
            font-size: 18px;
            font-weight:bold;
        }

        .table-main {
            width:800px;
            float: left;
            margin-left:10px;
        }
        .table-main ul li {
            width: 150px;
            float: left;
            line-height:80px;
            text-align: center;
            border-bottom: 1px solid #CCC;
            border-right:1px solid #CCC;
            font-size: 15px;
            margin: 5px;
            border-radius:20px;
            background: #009688;


        }
        .table-main2{
            background: #FFB800;
            font-size: 15px;
            border-radius:20px;
            cursor:pointer;

        }

        .table-main3{
            background: #ff0a0a;
            font-size: 15px;
            border-radius:20px;
            cursor:pointer;
            color:#FFF;
        }

        .table_left_son{
            background: red;
        }

    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="/">首页</a>
        <a href="">收银台</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="table-left">
            <ul>
                <li><a href="{:U('index')}">全部</a></li>
                <foreach name="cate" item="v">
                   <li <if condition="$_GET['keyword'] eq $v['isbox']"> style="background: #f0c040;" </if>>
                        <a href="{:U('index', ['keyword' => $v['isbox']])}">{$v.isbox}</a>
                    </li>
                </foreach>
            </ul>
        </div>

        <div class="table-main">
            <ul>
                <foreach name="data" item="vo">
                    <if condition="$vo['isuse'] eq 1">
                        <li onclick="x_admin_show('餐桌信息','{:U("Cashier/tableData",["id"=>$vo["id"]])}',800,600);"><div class="table-main2"><i class="layui-icon">&#xe64d;</i>{$vo.table_name}(就餐中)</div></li>
                    <elseif condition="$vo['isyy'] eq 1" />
                        <li onclick="x_admin_show('预约信息','{:U("Cashier/yyTableData",["id"=>$vo["id"]])}',800,600);"><div class="table-main3"><i class="layui-icon">&#xe64d;</i>{$vo.table_name}(已预约)</div></li>

                    <else/>
                        <li >{$vo.table_name}</li>
                    </if>

                </foreach>
            </ul>
        </div>

    </div>

</div>


</body>

</html>
<script>
    tableData = function (id) {
        alert(id);
    }
</script>